<template>
  <div>
    <div v-for="item of moduleList" :key="item.id" v-if="item.state === tag">
      <div class="row" @click="getMissionList(item.id)">
            <span>
              <svg class="icon projectIcon" aria-hidden="true">
                <use xlink:href="#icon-"></use>
              </svg>
              {{item.name}}
            </span>
           <span class="delIcon">
              <svg class="icon renIcon" aria-hidden="true">
                <use xlink:href="#iconren"></use>
              </svg>
              {{item.leaderName}}
            </span>
      </div>
      <el-progress :percentage="getPace(item.startTime,item.endTime)" class="paceMargin"></el-progress>
      <div style="margin-top: .3rem">
        <el-divider></el-divider>
      </div>
        <div v-for="data of missionList" :key="data.id" v-if="item.showMission">
          <div class="row" @click="goPaceMission(data)">
            <div>
              <span>
                <svg class="icon projectIcon missionStyle" aria-hidden="true">
                  <use xlink:href="#iconmokuai"></use>
                </svg>
                <span class="fontColor">{{data.name}}</span>
              </span>
              <span class="delIcon">
                <svg class="icon fuzerenIcon" aria-hidden="true">
                  <use xlink:href="#iconfuzeren"></use>
                </svg>
                <span class="fontColor">
                {{data.ownerName}}
                  </span>
              </span>
            </div>
          </div>
        <el-progress :percentage="getPace(data.startTime,data.endTime)" class="paceMargin"></el-progress>
        <div style="margin-top: .3rem">
          <el-divider></el-divider>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'paceModule',
  data () {
    return {
      viewMission: false,
      moduleList: [],
      missionList: [],
      tag: this.Run
    }
  },
  methods: {
    goPaceMission (mission) {
      sessionStorage.setItem('missionStartTime', mission.startTime)
      sessionStorage.setItem('missionEndTime', mission.endTime)
      sessionStorage.setItem('missionID', mission.id)
      sessionStorage.setItem('missionName', mission.name)
      this.$router.push('/missionPace')
    },
    getModuleList () {
      axios.get(this.url + '/module/project/' + sessionStorage.getItem('projectID'))
        .then(this.getModuleListSucc)
    },
    getModuleListSucc (res) {
      if (res.status === 200) {
        res = res.data
        this.moduleList = res
        this.moduleList.forEach(function (item) {
          item.showMission = false
        })
      } else alert(res.data)
    },
    getMissionList (id) {
      axios.get(this.url + '/mission/module/' + id)
        .then(this.getMissionListSucc)
      this.moduleList.forEach(function (item) {
        if (item.id !== id) item.showMission = false
        else item.showMission = !item.showMission
      })
    },
    getMissionListSucc (res) {
      if (res.status === 200) {
        res = res.data
        if (res.length === 0) alert('该课题暂无任务安排！')
        else this.missionList = res
      } else alert(res.data)
    },
    getPace (sTime, eTime) {
      if (!sTime || !eTime) return ''
      sTime = new Date(sTime.replace(/-/g, '/'))
      eTime = new Date(eTime.replace(/-/g, '/'))
      console.log(sTime)
      console.log(eTime)
      let diff = eTime.getTime() - sTime.getTime()
      let dayDiff = Math.floor(diff / (24 * 3600 * 1000))
      let date = new Date()
      let nowDiff = date.getTime() - sTime.getTime()
      let nowDayDiff = Math.floor(nowDiff / (24 * 3600 * 1000))
      let num = (100 * nowDayDiff / dayDiff).toFixed(1)
      // alert(num)
      return parseFloat(num)
    }
  },
  mounted () {
    this.getModuleList()
  }
}
</script>

<style lang="stylus" scoped>
  .right
    float: right
  .iconMargin
    margin-right .5rem
  .textColor
    color #0D0D0D
  .iconColor
    color #88d4ff
  .paceMargin
    margin-left .2rem
  .taskIcon
    color #16b0ff
  .row
    margin-top .6rem
    margin-left .5rem
    margin-bottom .6rem
  .delIcon
    float right
    margin-right .5rem
  .renIcon
    margin-right .3rem
  .fuzerenIcon
    margin-right .3rem
  .projectIcon
    margin-right .35rem
  .divider
    margin-top .5rem
  .missionStyle
    color  #757575
    margin-left .5rem
  .fontColor
    color #757575
</style>
